<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<script src="jquery-1.8.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {

				//1.带上红星为必填
				$("form input.required").each(function() {
					var $req = $("<strong class='high'>*</strong>");
					$(this).parent().append($req);

				});

				//2.验证用户名，长度不能少于6位
				$("form :input").blur(function() {
					if($(this).is("#username")) {
						var $parent = $(this).parent(); //找到他的父元素
						$parent.find(".f").remove();
						if(this.value=""||this.value.length<6) {
							var err = '不能为空且长度要大于6位';
							$parent.append('<span class="f"> ' + err + '</span>');
						} else {
							var ok = '完全正确';
							$parent.append('<span class="a">' + ok + '</span>');
						}
					}
				});

				//3.验证邮箱  必须包含数字和字母，有@和.号，@在.号之前
    			$("form :input").blur(function(){
    			if($(this).is("#email")){
    				var $parent=$(this).parent();
    				$parent.find(".f").remove();
    				var email=this.value;
    				var pattern=/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+$/;
    				if(!pattern.test(email)){
    					var err='邮箱不正确';
    					$parent.append('<span class="f">'+err+'</span>');
    				}
    				else{
    					var ok='格式正确';
    					$parent.append('<span class="f">'+err+'</span>');
    				}
    			}
			});


  
				//4.
			});
		</script>
	</head>

	<body>
		<form method="post" action="">
			<div class="int">
				<label for="username">用户名:</label>
				<input type="text" id="username" class="required" />
			</div>
			<div class="int">
				<label for="email">邮箱:</label>
				<input type="text" id="email" class="required" />
			</div>
			<div class="int">
				<label for="personinfo">个人资料:</label>
				<input type="text" id="personinfo" />
			</div>
			<div class="sub">
				<input type="submit" value="提交" id="send" /><input type="reset" id="res" />
			</div>
		</form>
	</body>

</html>